<template>
  <div class="my-swipe">
      <!--轮播图区域-->
      <van-swipe class="swiper-wrap-box"
      :show-indicators="false"
      :autoplay="5000"
      @change="onChange"
      ref="swiper"
      :height="h">
            <van-swipe-item v-for="(item,index) in imgs" :key="index">
              <router-link to="">
              <van-image class="image" fit="cover" :src="item.image" alt=""/>
              </router-link>
              </van-swipe-item>
            <!-- 指示器 -->
            <template #indicator>
             <ul class="custom-indicator"> 
               <li v-for = "(item, index) in imgs" :key = "index" :class = "{active: active == index}" @click = "tabSmall(item.id,index)">
                 <van-image  radius="5px" fit="cover" height="45px"  :src="item.imageSmall" alt=""/>
               </li>
             </ul>
           </template>
        </van-swipe>
  </div>
</template>
<script>
export default {
  name: 'swiper',

  data() {
    return {
     active:'',
     h:'124px',
     imgs:[]
    };
  },

 //页面挂载完毕之后，根据屏幕的宽度,计算轮播图的高度
  mounted() {
    //发送请求渲染图片
    this.$http.get('/swiper').then(result=>{
              //result.data结果是对象  result.data.data才是需要的数组数据
                this. imgs=result.data.data
                // console.log(this.imgs);
              });
           
    // 大图的宽高
    let picWidth=1903;  // 图片宽
    let picHeight=634;  // 图片高
    let screenWidth=window.screen.width; //当前屏幕的尺寸
    let swiperHeight=Math.floor((picHeight*screenWidth)/picWidth)+'px';
    this.h=swiperHeight;
   },

  methods: {
    
    //大轮播图
    onChange(index){ //index当前页的索引形参 0~3 
    /**当前轮播图的下标赋值给小图片的下标 给小图片添加激活的样式 */
      this.active=index;
      // console.log(this.active)
     },
    // 点击切换 id形参
    tabSmall(id,index){
       this.active=id;
       this.$refs.swiper.swipeTo(index);
    }
  },

};
</script>

<style lang="scss" scoped>
 
 .swiper-wrap-box{
   height:55vw;
   margin:10px;
   border-radius:10px;
   position: relative;
   box-sizing: border-box;
   .image{
      width: 100%;
      height:55vw;
    }
   //  指示器  ul
   .custom-indicator{
     width: 100%;//根据当前屏幕尺寸的宽度变化
     height:45px;
     position: absolute;
     bottom:0px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     z-index:3;
     border-radius:5px;
     background-color: rgba(78, 77, 77, 0.8);
     padding: 5px 0;
     
     li{
        width:80px;
        height:45px;
        border-radius:5px;
        }
     .active{
       border:1px solid #f7ab07;
     }
   } 
  }
</style>